<template>
<div>
    <!-- ref -->
    <p>年龄：{{age}}</p>
    <button @click="age++">
     增加年龄
    </button>
    <!-- reactive -->
    <p>姓名：{{ user.name }}</p>
    <input type="" placeholder="请输入姓名" v-model="user.name"/>
    <!-- 城市 -->
    <p>城市：{{user.address.city}}</p>
        <p><input placeholder="请输入城市" v-model="user.address.city"/></p> 
    <!-- 邮箱 -->
    <p>邮箱：{{user.email}}</p>
    <input placeholder="请输入邮箱" v-model="user.email"/>

</div>
</template>
<script setup>
import { ref,reactive } from 'vue';
const age=ref(25);
const user=reactive({
    name:"张三",
    address:{
        city:"北京",
        country:"中国"
    },
    email:"zhangsan@example.com"
})
//定时器 
setInterval(()=>{
age.value++;
user.name="李四"
user.address.city="赤峰市"
user.email='lisi@example.com'
},4000)
</script>